<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生活管理系统 - 登录/注册</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #e9ecef;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      overflow: hidden;
    }

    .box {
      position: relative;
      width: 600px;
      height: 600px;
    }

    .container,
    .auth-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 600px;
      height: 600px;
      transition: all 0.8s ease;
      border-radius: 12px;
    }

    .container {
      z-index: 2;
      background-color: #3b82f6;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    }

    .auth-container {
      z-index: 1;
      background-color: #fff;
      padding: 50px;
      box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.2);
    }

    /* 动画效果 */
    .box:hover .container {
      transform: translateX(-50%);
    }

    .box:hover .auth-container {
      transform: translateX(50%);
    }

    .title {
      color: #fff;
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 30px;
      text-align: center;
      padding: 0 20px;
    }

    .action-btn {
      color: #fff;
      font-size: 20px;
      text-decoration: none;
      transition: all 0.3s ease;
      padding: 8px 20px;
      border: 2px solid #fff;
      border-radius: 30px;
      cursor: pointer;
      margin: 10px 0;
      display: inline-block;
    }

    .action-btn:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }

    .auth-title {
      text-align: center;
      font-size: 36px;
      color: #3b82f6;
      margin-bottom: 40px;
    }

    .form-group {
      margin-bottom: 25px;
    }

    .form-group input {
      width: 100%;
      padding: 10px 0;
      border: none;
      border-bottom: 2px solid #3b82f6;
      outline: none;
      font-size: 16px;
      background: transparent;
    }

    .form-group input::placeholder {
      color: #9ca3af;
    }

    .remember-password {
      margin-bottom: 30px;
      font-size: 14px;
      color: #666;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-submit {
      display: block;
      width: 180px;
      margin: 0 auto 20px;
      padding: 12px;
      background-color: #e0e7ff;
      color: #3b82f6;
      border: 1px solid #3b82f6;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      text-align: center;
      transition: all 0.3s;
    }

    .btn-submit:hover {
      background-color: #3b82f6;
      color: white;
    }

    .toggle-link {
      text-align: center;
      font-size: 16px;
      color: #666;
    }

    .toggle-link a {
      color: #673ab7;
      text-decoration: none;
      cursor: pointer;
    }

    .toggle-link a:hover {
      text-decoration: underline;
    }

    /* 错误/成功提示 */
    .message {
      text-align: center;
      font-size: 14px;
      margin-bottom: 15px;
      height: 20px;
    }

    .error {
      color: #ef4444;
    }

    .success {
      color: #10b981;
    }

    /* 表单切换容器 */
    .form-container {
      position: relative;
      height: 100%;
    }

    #login-form, #register-form {
      position: absolute;
      width: 100%;
      transition: all 0.5s ease;
    }

    #register-form {
      opacity: 0;
      pointer-events: none;
      transform: translateY(20px);
    }

    .register-mode #login-form {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-20px);
    }

    .register-mode #register-form {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0);
    }

    @media (max-width: 768px) {
      .box, .container, .auth-container {
        width: 90vw;
        height: auto;
        min-height: 500px;
      }
    }
  </style>
</head>

<body>
  <div class="box">
    <!-- 左侧欢迎区域 -->
    <div class="container">
      <div class="title">欢迎来到生活管理系统</div>
      <div class="action-btn" id="show-login">登录</div>
      <div class="action-btn" id="show-register">注册</div>
    </div>

    <!-- 右侧表单区域（包含登录/注册表单） -->
    <div class="auth-container">
      <h1 class="auth-title" id="auth-title">登录</h1>
      <div class="message" id="message"></div>
      
      <div class="form-container" id="form-container">
        <!-- 登录表单 -->
        <form id="login-form">
          <div class="form-group">
            <input type="text" id="login-username" placeholder="用户名" required>
          </div>
          <div class="form-group">
            <input type="password" id="login-password" placeholder="密码" required>
          </div>
          <div class="remember-password">
            <input type="checkbox" id="remember">
            <label for="remember">记住密码</label>
          </div>
          <button type="submit" class="btn-submit">登录</button>
          <div class="toggle-link">
            还没有账号？<a id="to-register">注册</a>
          </div>
        </form>

        <!-- 注册表单 -->
        <form id="register-form">
          <div class="form-group">
            <input type="text" id="reg-username" placeholder="请设置用户名" required>
          </div>
          <div class="form-group">
            <input type="password" id="reg-password" placeholder="请设置密码（至少6位）" required>
          </div>
          <div class="form-group">
            <input type="password" id="reg-confirm" placeholder="请确认密码" required>
          </div>
          <button type="submit" class="btn-submit">注册</button>
          <div class="toggle-link">
            已有账号？<a id="to-login">登录</a>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script>
    // 初始化用户数据（从localStorage读取）
    let users = JSON.parse(localStorage.getItem('systemUsers')) || [];

    // DOM元素
    const formContainer = document.getElementById('form-container');
    const authTitle = document.getElementById('auth-title');
    const message = document.getElementById('message');
    const box = document.querySelector('.box');

    // 显示登录/注册表单
    function showLogin() {
      formContainer.classList.remove('register-mode');
      authTitle.textContent = '登录';
      message.textContent = '';
    }

    function showRegister() {
      formContainer.classList.add('register-mode');
      authTitle.textContent = '注册';
      message.textContent = '';
    }

    // 触发动画并显示对应表单
    document.getElementById('show-login').addEventListener('click', () => {
      box.classList.add('active');
      document.querySelector('.container').style.transform = 'translateX(-50%)';
      document.querySelector('.auth-container').style.transform = 'translateX(50%)';
      showLogin();
    });

    document.getElementById('show-register').addEventListener('click', () => {
      box.classList.add('active');
      document.querySelector('.container').style.transform = 'translateX(-50%)';
      document.querySelector('.auth-container').style.transform = 'translateX(50%)';
      showRegister();
    });

    // 表单切换链接
    document.getElementById('to-register').addEventListener('click', (e) => {
      e.preventDefault();
      showRegister();
    });

    document.getElementById('to-login').addEventListener('click', (e) => {
      e.preventDefault();
      showLogin();
    });

    // 注册功能
    document.getElementById('register-form').addEventListener('submit', (e) => {
      e.preventDefault();
      const username = document.getElementById('reg-username').value.trim();
      const password = document.getElementById('reg-password').value.trim();
      const confirm = document.getElementById('reg-confirm').value.trim();

      // 验证逻辑
      if (!username || !password || !confirm) {
        showMessage('请填写完整信息', 'error');
        return;
      }

      if (password.length < 6) {
        showMessage('密码长度至少6位', 'error');
        return;
      }

      if (password !== confirm) {
        showMessage('两次输入的密码不一致', 'error');
        return;
      }

      if (users.some(user => user.username === username)) {
        showMessage('用户名已存在', 'error');
        return;
      }

      // 注册成功，保存用户数据
      users.push({ username, password });
      localStorage.setItem('systemUsers', JSON.stringify(users));
      
      showMessage('注册成功，即将跳转到登录', 'success');
      
      // 3秒后切换到登录表单
      setTimeout(() => {
        showLogin();
        document.getElementById('login-username').value = username;
      }, 1500);
    });

    // 登录功能
    document.getElementById('login-form').addEventListener('submit', (e) => {
      e.preventDefault();
      const username = document.getElementById('login-username').value.trim();
      const password = document.getElementById('login-password').value.trim();
      const remember = document.getElementById('remember').checked;

      // 验证用户
      const user = users.find(u => u.username === username && u.password === password);
      
      if (user) {
        // 保存登录状态
        localStorage.setItem('isLoggedIn', 'true');
        localStorage.setItem('currentUser', username);
        
        if (remember) {
          localStorage.setItem('rememberMe', 'true');
        } else {
          localStorage.removeItem('rememberMe');
        }

        showMessage('登录成功，正在进入系统...', 'success');
        setTimeout(() => {
          window.location.href = '1.html';
        }, 1000);
      } else {
        showMessage('用户名或密码错误', 'error');
      }
    });

    // 显示提示信息
    function showMessage(text, type) {
      message.textContent = text;
      message.className = 'message ' + type;
      
      // 3秒后清除提示（成功提示不清除，因为会跳转）
      if (type === 'error') {
        setTimeout(() => {
          message.textContent = '';
          message.className = 'message';
        }, 3000);
      }
    }

    // 页面加载时检查登录状态
    window.addEventListener('load', () => {
      if (localStorage.getItem('isLoggedIn') === 'true') {
        window.location.href = '1.html';
      }
    });
  </script>
</body>
</html>